<template>
  <el-form class="right-event-front-events" v-if="frontEvent">
    <switch-normal v-model="frontEvent.comps[0].attrs.isBreak" label="中断事件" @change="onUpdateEvent"></switch-normal>
    <switch-normal v-model="frontEvent.comps[0].attrs.isCommonFrontEvents" label="优先执行" @change="onUpdateEvent"></switch-normal>
    <div v-if="isSwiper">
      <input-normal label="交互关联id" v-model="frontEvent.comps[1].attrs.relateCompId" @change="onUpdateEvent"></input-normal>
      <!-- <textarea-normal label="关联组件数据" v-model="frontEvent.comps[1].attrs.imgs" @change="onUpdateEvent"></textarea-normal> -->
    </div>
    <div v-else-if="isRandomOpenPage">
      <input-normal label="交互关联id" v-model="frontEvent.comps[1].attrs.relateCompId" @change="onUpdateEvent"></input-normal>
      <textarea-normal label="规则" v-model="frontEvent.comps[1].attrs.rules" @change="onUpdateEvent"></textarea-normal>
      <!-- <textarea-normal label="规则对应图片组" v-model="frontEvent.comps[1].attrs.imgs" @change="onUpdateEvent"></textarea-normal> -->
    </div>
    <div v-else-if="isWeiboWeixin">
      <input-normal label="微博关联id" v-model="frontEvent.comps[1].attrs.weiboCompId" @change="onUpdateEvent"></input-normal>
      <input-normal label="微信关联id" v-model="frontEvent.comps[1].attrs.weixinCompId" @change="onUpdateEvent"></input-normal>
    </div>
    <div v-else-if="isChangeRelateCompData">
      <textarea-normal label="关联组件数据" v-model="frontEvent.comps[1].attrs.compIdObj" @change="onUpdateEvent"></textarea-normal>
      <!-- <textarea-normal label="关联组件数据" v-model="frontEvent.comps[1].attrs.imgs" @change="onUpdateEvent"></textarea-normal> -->
    </div>
  </el-form>
</template>

<script>
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

import { FRONT_EVENT_TYPE_MAPS } from "@/common/events"
import { mapState, mapActions } from 'vuex'

  export default {
  name: "AddEventFrontEvents",
    components: {
      TextareaNormal,
      InputNormal,
      SwitchNormal,
    },
    computed:{
      ...mapState({
        frontEvent: (state) => {
          if(state.components.currentComponentData){
            return _.cloneDeep(state.components.currentComponentData.events.frontEvents)
          }else{
            return _.cloneDeep(state.components.currentPage.events.frontEvents)
          }
        },
        isComp: (state) => state.components.currentComponentData ? true : false,
        isSwiper(){
          const type = this.frontEvent.comps[0].attrs.value;
          if(type == FRONT_EVENT_TYPE_MAPS.swiper){
            return true;
          }else{
            return false ;
          }
        },
        isRandomOpenPage(){
          const type = this.frontEvent.comps[0].attrs.value;
          const str = this.frontEvent.comps[1].attrs.value;
          if(type == FRONT_EVENT_TYPE_MAPS.randomOpenPage && str.length > 0){
            return true;
          }else{
            return false ;
          }
        },
        isWeiboWeixin(){
          const type = this.frontEvent.comps[0].attrs.value;
          if(type == FRONT_EVENT_TYPE_MAPS.weiboWeixin){
            return true;
          }else{
            return false ;
          }
        },
        isChangeRelateCompData(){
          const type = this.frontEvent.comps[0].attrs.value;
          if(type == FRONT_EVENT_TYPE_MAPS.changeRelateCompData){
            return true;
          }else{
            return false ;
          }
        }
      }),
    },
    methods:{
      ...mapActions({
        updateEvent: "components/updateEvent",
        updatePageEvent: "components/updatePageEvent",
      }),
      
      onUpdateEvent() {
        const event = this.frontEvent;
        if(this.isComp){
          this.updateEvent({type:event.type, event});
        }else{
          this.updatePageEvent({type:event.type, event});
        }
      },
    }
  }
</script>